<template>
    <div @click="push" class="goods-item">
        <div class="g-img">
            <img v-lazy="data.pict_url+'_200x200'">
        </div>
        <div class="g-desc">
            <h4 class="g-title"><span class="usertype">{{data.user_type?"天猫":"淘宝"}}</span> {{data.title}}</h4>
            <div class="g-base">
                <span class="g-quan"><span>券</span><b>{{data.coupon_amount}}元</b></span>
                <span class="g-xiaoliang">已售{{data.volume}}件</span>
            </div>
            <div class="g-jiage">
                <span>券后<b>{{data.zk_final_price|price(data.coupon_amount)}}</b></span>
                <span><s>{{data.zk_final_price}}</s></span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "tk-goods",
        props: {
            data: {
                type: Object,
                default: function () {
                    return {}
                }
            }
        },
        methods: {
            push() {
                sessionStorage.setItem(this.data.item_id,JSON.stringify(this.data));
                this.$router.push({
                    name: 'page',
                    params: {
                        id: this.data.item_id
                    }
                })
            }
        },
        filters: {
            price(zk_price,ticket) {
                let result = zk_price - ticket;
                return result.toFixed(2);
            }
        }
    }
</script>
<style scoped>
    .goods-item {
        background: #fff;
        display: flex;
        padding: 10px;
        margin-top: 10px;
        border-radius: 5px;
        flex-direction: row;
        cursor: pointer;
    }
    .goods-item .g-img{
        flex: 1;
    }
    .goods-item .g-title {
        font-size: 14px;
        font-weight: normal;
        line-height: 20px;
        height: 40px;
        overflow: hidden;
    }
    
    .goods-item .g-desc {
        flex: 3;
        margin-left: 10px;
        display: flex;
        flex-direction: column;
    }
    .goods-item .g-desc .g-base {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
        font-size: 12px;
        color: #777;
    }
    
    .goods-item .g-desc .g-quan {
        flex: none;
        display: flex;
        border: 1px #ff718b solid;
        border-radius: 3px;
    }
    
    .goods-item .g-desc .g-quan span {
        padding: 0px 4px;
        background: #ff718b;
        color: #fff;
    }
    
    .goods-item .g-desc .g-quan b {
        background: #fff;
        color: #ff718b;
        padding: 0px 4px;
    }
    
    .goods-item .g-desc .g-jiage {
        color: #777;
        margin-top: 10px;
        font-size: 12px;
    }
    
    .goods-item .g-desc .g-jiage b {
        font-size: 16px;
        color: #333;
        padding-left: 5px;
        margin-right: 5px;
    }
    
    .goods-item .g-desc .g-jiage b::before,
    .goods-item .g-desc .g-jiage s::before {
        content: '¥';
        font-size: 10px;
        padding-right: 2px;
    }
   
    .usertype{
        font-size: 12px;
        border-radius: 3px;
        background: #ff718b;
        color: #fff;
        padding: 0 2px;
    }
</style>